<!-- INCLUDE overall_header.html -->

<!--  the content div -->

<div>
	<!--  left image -->
	<div class="dossiersLeft">
		<img src="{REP}images/dossiers/left.jpg" />
	</div>
	
	<!-- right column -->
	<div class="dossiersRight" id="dossiersRight">
		<h2>{DETAILS_NOM}</h2>
		<p class="small">{DETAILS_DATE}</p>
		<!-- BEGIN auteurs -->
			<div>
				<b>{auteurs.AUTEUR_NAME}</b><br />
				{auteurs.AUTEUR_AVATAR}
			</div>
		<!-- END auteur -->
	</div>
	
	<!-- main column -->
	<div class="dossiersCenter">
		<!-- Display the top menu -->
		<div class="sliderMenu">
			<ul class="lavaLamp" id="sliderMenu">
	           <li id="all"><a href="#">Tout</a></li>
	            <!-- BEGIN categories -->
	            	<li id="{categories.TITRE}"><a href="#">{categories.TITRE}</a></li>
	            <!-- END categories -->
	        </ul>
		</div>
		
		<div id="dossiersDiv">
			<ul class="dossiers" id="dossiersContent">
				<!-- BEGIN dossiers -->
				<li id="{dossiers.DOSSIER_ID}">
					<a href="dossier.php?dossier={dossiers.DOSSIER_ID}">
						<img src="{REP}images/dossiers/vignette.png" align="left" border="0" />
						<h3>{dossiers.DOSSIER_NOM}</h3>
						<span>{dossiers.DOSSIER_CAT}</span>
						<p>{dossiers.DOSSIER_CHAPEAU}</p>
					</a>
				</li>
				<!-- END dossiers -->
			</ul>
			<div class="loading" id="loading">Patience, on cherche les dossiers suivants.</div>
	    	<div class="loading" id="nomoreresults">Oups, vous avez d&eacute;j&agrave; tout lu !</div>
    	</div>
	</div>
</div>

<script type="text/javascript" src="../js/lib/lavalamp-0.2.0/jquery.easing.min.js"></script>
<script type="text/javascript" src="../js/lib/lavalamp-0.2.0/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="../js/lib/jqueryscrollpagination/scripts/scrollpagination.js"></script>
<script type="text/javascript">

function displayDetails(divId)
{
	$("#dossiersRight").fadeOut(function() {
		$("#dossiersRight").load("loadDetails.php", {id : divId}, function() {
		$("#dossiersRight").css("top", $("#"+divId).position().top+10);
		$("#dossiersRight").fadeIn();});}
	);
}

//This is th script for th slider menu :
$(function() {
    $("#sliderMenu").lavaLamp({
        fx: "backout",
        speed: 700,
        click: function(event, menuItem) {
        	var filter = this.id;
        	if(filter == "all")
        		$("#dossiersContent li").each(function()
        		{
        				$(this).fadeIn();
        		});
        	else
	        	$("#dossiersContent li").each(function()
		        	{
		        		if($(this).find('span').text() != filter)
		        			$(this).fadeOut();
		        		else
		        			$(this).fadeIn();
		        	}
	        	);
            return false;
        }
    });
});

//This is the script for the infinite scroll :
$(function(){
	var loads = 0;
	$('#dossiersContent').scrollPagination({
		'contentPage': 'searchNextDossiers.php', // the page where you are searching for results
		'contentData': {pagination : function(){ return loads;}}, // you can pass the children().size() to know where is the pagination
		'scrollTarget': $(window), // who gonna scroll? in this example, the full window
		'heightOffset': 100, // how many pixels before reaching end of the page would loading start? positives numbers only please
		'beforeLoad': function(){ // before load, some function, maybe display a preloader div
			loads += 5;
			$('#loading').fadeIn();	
		},
		'afterLoad': function(elementsLoaded){ // after loading, some function to animate results and hide a preloader div
			 $('#loading').fadeOut();
			 $(elementsLoaded).fadeInWithDelay();
			 $(elementsLoaded).mouseenter(
						function () {
							displayDetails(this.id);
						}
					);
			 if ($('#dossiersContent').children().size() > 100){ // if more than 100 results loaded stop pagination (only for test)
			 	$('#nomoreresults').fadeIn();
				$('#dossiersContent').stopScrollPagination();
			 }
		}
	});
	
	// code for fade in element by element with delay
	$.fn.fadeInWithDelay = function(){
		var delay = 0;
		return this.each(function(){
			$(this).delay(delay).animate({opacity:1}, 200);
			delay += 100;
		});
	};
	
	
		   
});

$('#dossiersContent li').mouseenter(
		function () {
			displayDetails(this.id);
		}
	);
</script>

<!-- INCLUDE overall_footer.html -->